<template>
  <div class="box">
    <div class="top">
      <p class="title">事务处理</p>
      <p class="bg"></p>
      <!-- <p class="right">
        可预约总量
        <span>99999</span>
        人
      </p> -->
    </div>
    <div class="number">
      <span class="number-title"
        >事务数量
        <div style="color: #29fcff">{{ AffairCount.all }}</div>
      </span>
      <span class="number-title"
        >已处理
        <div style="color: #29fcff">{{ AffairCount.handleCount }}</div></span
      >
      <span class="number-title"
        >未处理
        <div style="color: #29fcff">{{ AffairCount.noHandleCount }}</div></span
      >
    </div>

    <div class="charts">
      <el-table
        class="custom-table"
        :data="tableData"
        style="width: 95%"
        :border
        @row-click="handleRowClick"
      >
        <el-table-column
          :resizable="false"
          type="index"
          label="序号"
          width="80"
        />
        <el-table-column
          :resizable="false"
          prop="robotName"
          label="设备名称"
          :show-overflow-tooltip="true"
          sortable
        />
        <el-table-column
          label="质保期"
          prop="workType"
          :align="'center'"
          :show-overflow-tooltip="true"
          sortable
        >
          <template #default="{ row }">
            {{ workTypeFormatter(row.workType) }}
          </template>
        </el-table-column>
        <el-table-column
          :resizable="false"
          prop="handleStatus"
          label="处理状态"
          sortable
        >
          <template #default="{ row }">
            {{ handleStatusFormatter(row.handleStatus) }}
          </template>
        </el-table-column>

        <!-- <el-table-column
          :resizable="false"
          prop="priority"
          label="优先级"
          :show-overflow-tooltip="true"
        >
          <template #default="{ row }">
            {{ priorityFormatter(row.priority) }}
          </template>
        </el-table-column> -->

        <!-- <el-table-column
          :resizable="false"
          prop="createTime"
          label="创建时间"
          :show-overflow-tooltip="true"
        >
          <template #default="{ row }">
            <el-tooltip :content="formatTime(row.createTime)" placement="top"> 
            <div class="no-wrap"> 
            {{ formatTime(row.createTime) }}
            </div> 
            </el-tooltip> 
          </template>
        </el-table-column> -->
        <!-- <el-table-column
          :resizable="false"
          prop="affairsRemark"
          label="任务描述"
          :show-overflow-tooltip="true"
        /> -->
      </el-table>
    </div>
    <el-dialog
      v-model="dialogVisible"
      width="50%"
      :modal="false"
      :show-close="false"
      style="background-color: rgba(15, 32, 54, 0.8)"
      @close="close"
    >
      <el-descriptions
        :column="1"
        border
        size="large"
        style="background: transparent; color: #fff"
        class="white-detail"
      >
        <el-descriptions-item label="所述客户">
          <text style="color: #fff"> {{ formData.customer }}</text>
        </el-descriptions-item>

        <el-descriptions-item label="优先级">
          <text style="color: #fff">
            {{ priorityFormatter(formData.priority) }}</text
          >
        </el-descriptions-item>

        <el-descriptions-item label="创建时间">
          <text style="color: #fff">
            {{ formatTime(formData.createTime) }}</text
          >
        </el-descriptions-item>

        <el-descriptions-item label="工单描述">
          <text style="color: #fff"> {{ formData.affairsRemark }}</text>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { RobotApi } from "@/api/map/airlist";
import { RobotAffairApi } from "@/api/health/robotaffair";
import dayjs from "dayjs";
const tableData = ref([]);
const AffairCount = ref<any>({});
onMounted(async () => {
  const res = await RobotApi.getRobotAffairList();
  tableData.value = res;
  //console.log(res, "getRobotAffairList");

  const ress = await RobotApi.getRobotAffairCount();
  AffairCount.value = ress;
  //console.log(ress, "getRobotAffairCount");
});
const workTypeFormatter = (status: any) => {
  const STATUSES = [
    { workType: 1, name: "质保中" },
    { workType: 2, name: "质保外" },
  ];

  const matched = STATUSES.find((item) => item.workType === status);
  return matched ? matched.name : "";
};

const handleStatusFormatter = (status: any) => {
  const STATUSES = [
    { handleStatus: 0, name: "未处理" },
    { handleStatus: 1, name: "处理中" },
    { handleStatus: 2, name: "已处理" },
  ];

  const matched = STATUSES.find((item) => item.handleStatus === status);
  return matched ? matched.name : "";
};
const priorityFormatter = (status: any) => {
  const STATUSES = [
    { priority: "1", name: "低" },
    { priority: "2", name: "普通" },
    { priority: "3", name: "高" },
    { priority: "4", name: "紧急" },
    { priority: "5", name: "立刻" },
  ];

  const matched = STATUSES.find((item) => item.priority === status);
  return matched ? matched.name : "";
};
// 时间格式化函数
const formatTime = (timestamp) => {
  if (!timestamp) return ""; // 如果时间戳为空，返回空字符串
  return dayjs(timestamp).format("YYYY-MM-DD HH:mm:ss"); // 自定义格式
};
const dialogVisible = ref(false);

/** 行点击事件 */
const formData = ref({} as any);
async function handleRowClick(row: Row) {
  dialogVisible.value = true;
  formData.value = await RobotAffairApi.getRobotAffair(row.id);
  console.log(formData.value, "formData.value");
}
const close = () => {
  dialogVisible.value = false;
};
</script>

<style scoped lang="scss">
.box {
  background: url(../../images/dataScreen-main-lb.png) no-repeat;
  background-size: 100% 100%;
  margin-top: 10px;

  .top {
    margin-left: 20px;

    .title {
      color: white;
      font-size: 20px;
    }

    .bg {
      width: 68px;
      height: 7px;
      background: url(../../images/dataScreen-title.png) no-repeat;
      background-size: 100% 100%;
      margin-top: 10px;
    }

    .right {
      float: right;
      color: white;
      font-size: 20px;
      span {
        color: #ccc;
      }
    }
  }

  .number {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

    .number-title {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    span {
      width: 35%;
      height: 50px;
      text-align: center;
      line-height: 20px;
      background: url(../../images/total.png) no-repeat;
      background-size: 100% 100%;
      color: #fff;
    }
  }

  .charts {
    display: flex;
    justify-content: center;
    height: 230px;
  }
}
/* 设置表格宽度和 box-sizing */
::v-deep .el-table {
  margin-top: 16px;
  background-color: transparent !important;
  border: 1px solid #29fcff !important;
  width: 100%; /* 或者设置一个具体的宽度 */
  height: 185px;
  table-layout: fixed; /* 确保表格宽度固定，避免扩展 */
  box-sizing: border-box; /* 包括边框和内边距在内计算宽度 */
}
::v-deep .el-table tr {
  color: #fff;
  height: 46px;
  white-space: nowrap;
  background-color: transparent !important;
}

::v-deep .custom-table .el-table__header th,
::v-deep .custom-table .el-table__body td {
  text-align: center;
  border: 1px solid #29fcff;
  background-color: transparent !important;
}
.no-wrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 覆盖 el-descriptions 默认样式，全部白字、无背景、无边框 */
.white-detail {
  --el-descriptions-item-bordered-label-background: transparent;
  --el-fill-color-blank: transparent;
  --el-border-color-lighter: transparent;
  color: #fff !important;
}

/* 标签文字也变白 */
.white-detail :deep(.el-descriptions__label) {
  color: #fff;
}
</style>
